// import { Graph, Shape } from '@antv/x6'
// import { Stencil } from '@antv/x6-plugin-stencil'
import { useEffect, useState } from 'react'
import "./index.less"
import useGraph from "@/store/graph"
import { initGraph } from '@/pages/Graph/Assistant/components/graph'
import { Button, Modal } from 'antd'
import { useIntl } from '@umijs/max'
// import { runGraph, saveGraph } from './graphOperate'
import { saveGraph, clickSend, importGraph } from './graphOperate'
import { listNode } from '@/services/graph/node'
import Chat from '@/pages/Chat'
import TextArea from 'antd/lib/input/TextArea'
const X6 = () => {
  const graphState = useGraph()
  useEffect(() => {
    //离开页面时的清理
    const clean = () => {
      graphState.clearGraph();
    }
    listNode().then(resp => {
      const graph = initGraph(resp)
      graphState.setGraph(graph);
    }).catch(err => {
      console.log(err)
    })
    return () => {
      clean()
    }
  }, [])
  const [chatWindows, setChatWindows] = useState(false)
  const [importView, setImportView] = useState(false)
  const [graphJson, setGraphJson] = useState<string>()
  // const textAreaRef = useRef()
  function openImportView() {
    setImportView(true)
  }
  function closeChatWindows() {
    setChatWindows(false)
  }
  const clickRun = () => {
    // runGraph()
    setChatWindows(true)
  }
  const intl = useIntl()
  return (
    <div id="external-container">
      <div id="x6-container">
        <div id="stencil-container"></div>
        <div id="x6-graph-container">
          <div id="tool-bar-container">
            <Button onClick={saveGraph} type='primary'>保存</Button>
            <Button onClick={clickRun} type='primary'>
              {intl.formatMessage({
                id: 'pages.graph.bar.button.test',
              })}
            </Button>
            <Button onClick={openImportView}>导入</Button>
            <Modal open={chatWindows}
              onCancel={closeChatWindows}
              onOk={closeChatWindows}
              width="70%"
            >
              <Chat clickSend={clickSend} />
            </Modal>
            <Modal open={importView}
              onCancel={() => {
                setImportView(false)
              }}
              onOk={() => {
                setImportView(false)
                importGraph(graphJson!)
              }}
              width="70%">
              <TextArea onChange={(e) => {
                setGraphJson(e.target.value)
              }}>{graphJson}</TextArea>
            </Modal>
          </div>
          <div id="graph-container">
          </div>
        </div>
      </div>
    </div>
  )
}

export default X6
